<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单页面调试启动器</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background-color: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        h1 {
            color: #1976d2;
            margin-top: 0;
        }
        button {
            background-color: #1976d2;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.2s;
        }
        button:hover {
            background-color: #1565c0;
        }
        pre {
            background-color: #f0f0f0;
            padding: 15px;
            border-radius: 4px;
            overflow-x: auto;
            font-family: 'Consolas', 'Monaco', monospace;
        }
        .instructions {
            margin-bottom: 20px;
        }
        .status {
            margin-top: 20px;
            padding: 10px;
            border-radius: 4px;
            background-color: #e3f2fd;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>订单页面调试启动器</h1>
        
        <div class="instructions">
            <h2>使用说明</h2>
            <ol>
                <li>点击下方按钮启动调试流程</li>
                <li>脚本会自动打开订单页面</li>
                <li>调试器会注入到订单页面中，并显示调试面板</li>
                <li>在订单页面的浏览器控制台中查看详细日志</li>
            </ol>
        </div>
        
        <div>
            <button id="start-debug-btn">启动订单页面调试</button>
        </div>
        
        <div class="status" id="status">
            <p>状态: 等待启动...</p>
        </div>
        
        <div style="margin-top: 30px;">
            <h2>调试内容包括：</h2>
            <ul>
                <li>监控Vue实例的orders和filteredOrders数据</li>
                <li>实时显示订单数量和状态分布</li>
                <li>检查模板渲染情况</li>
                <li>记录数据变化和标签切换</li>
                <li>提供调试面板显示关键信息</li>
            </ul>
        </div>
        
        <div style="margin-top: 30px;">
            <h2>调试器代码预览：</h2>
            <pre id="debugger-code-preview">加载中...</pre>
        </div>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const startDebugBtn = document.getElementById('start-debug-btn');
            const statusElement = document.getElementById('status');
            const debuggerCodePreview = document.getElementById('debugger-code-preview');
            
            // 预览调试器代码
            fetch('inject-debugger.js')
                .then(response => response.text())
                .then(text => {
                    debuggerCodePreview.textContent = text.substring(0, 500) + '\n...\n(代码过长，仅显示前500字符)';
                })
                .catch(error => {
                    console.error('无法加载调试器代码:', error);
                    debuggerCodePreview.textContent = '无法加载调试器代码';
                });
            
            // 启动调试按钮点击事件
            startDebugBtn.addEventListener('click', function() {
                console.log('开始订单页面调试...');
                statusElement.innerHTML = '<p>状态: 正在打开订单页面...</p>';
                
                // 打开订单页面
                const orderWindow = window.open('http://localhost:5174/orders', '_blank');
                
                // 等待页面加载完成后注入调试器
                setTimeout(function() {
                    if (orderWindow && !orderWindow.closed) {
                        console.log('订单页面已打开，准备注入调试器...');
                        statusElement.innerHTML = '<p>状态: 正在注入调试器...</p>';
                        
                        try {
                            // 注入调试器脚本
                            const scriptContent = 
                                "(function() {"
                                + "    // 创建script元素"
                                + "    const script = document.createElement('script');"
                                + "    script.src = '/inject-debugger.js';"
                                + "    script.onload = function() {" 
                                + "        console.log('调试器脚本已成功注入并加载');" 
                                + "    };"
                                + "    script.onerror = function() {" 
                                + "        console.error('加载调试器脚本失败');" 
                                + "        alert('加载调试器脚本失败，请检查控制台');" 
                                + "    };"
                                + "    document.head.appendChild(script);"
                                + "})();";
                            
                            orderWindow.postMessage({ type: 'INJECT_DEBUGGER', code: scriptContent }, '*');
                            
                            statusElement.innerHTML = 
                                '<p>状态: 调试器注入完成！</p>' +
                                '<p>请查看新打开的订单页面，调试面板应该已显示在右上角。</p>' +
                                '<p>同时，打开浏览器控制台查看详细日志。</p>';
                            
                        } catch (error) {
                            console.error('注入调试器失败:', error);
                            statusElement.innerHTML = '<p>状态: 注入调试器失败！</p><p>错误信息: ' + error.message + '</p>';
                        }
                    } else {
                        console.error('订单页面未打开或已关闭');
                        statusElement.innerHTML = '<p>状态: 订单页面未打开或已关闭！</p><p>请确保浏览器允许弹出窗口。</p>';
                    }
                }, 3000); // 等待3秒，确保页面加载完成
            });
            
            // 监听消息，以便从被注入的页面接收信息
            window.addEventListener('message', function(event) {
                if (event.data.type === 'DEBUGGER_STATUS') {
                    console.log('收到调试器状态消息:', event.data.status);
                    statusElement.innerHTML = '<p>状态: ' + event.data.status + '</p>';
                }
            });
        });
    </script>
</body>
</html>